<template>
  <div v-title data-title="简易论坛">
    <el-container>
      <!-- style="background-color: rgb(213, 154, 247)" -->
      <el-aside width="278px">
        <el-row>
            <!-- 一定要指定哪个属性展示key-value -->
            <el-autocomplete
              class="inline-input"
              v-model="search"
              :fetch-suggestions="querySearch"
              placeholder="请输入标签"
              @select="handleSelect"
              value-key="tagName"
            ></el-autocomplete>
            <el-button plain @click="getArticleByTag">搜索</el-button>
        </el-row>
        <el-row>
          <el-menu>
            <el-menu-item v-for="t in allTypes" :key="t.id">
              <span slot="title">{{t.typeName}}</span>
            </el-menu-item>
          </el-menu>
        </el-row>
      </el-aside>

      <el-main class="me-articles">

        <article-scroll-page>

        </article-scroll-page>

      </el-main>

      <el-aside>

        <card-me class="me-area"></card-me>
        <card-tag :tags="hotTags"></card-tag>

        <card-article cardHeader="最热文章" :articles="hotArticles"></card-article>

        <card-archive cardHeader="文章归档" :archives="archives"></card-archive>

        <card-article cardHeader="最新文章" :articles="newArticles"></card-article>

      </el-aside>

    </el-container>
  </div>
</template>

<script>
  import CardMe from '@/components/card/CardMe'
  import CardArticle from '@/components/card/CardArticle'
  import CardArchive from '@/components/card/CardArchive'
  import CardTag from '@/components/card/CardTag'
  import ArticleScrollPage from '@/views/common/ArticleScrollPage'

  import {getArticles, getHotArtices, getNewArtices} from '@/api/article'
  import {getHotTags} from '@/api/tag'
  import {listArchives} from '@/api/article'

  export default {
    name: 'Index',
    created() {
      this.getHotArtices()
      this.getNewArtices()
      this.getHotTags()
      // this.listArchives()
      this.loadAllTags()
      this.loadAllTypes()
    },
    data() {
      return {
        search: '' ,
        allTags: [] ,
        allTypes: [] ,
        hotTags: [] ,
        hotArticles: [] ,
        newArticles: [] ,
        archives: [] ,
      };
    },
    methods: {
      getHotArtices() {
        let that = this

        getHotArtices()
        .then(data => {
          // console.log("data : " , data)
          that.hotArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error', 
              message: '最热文章加载失败!', 
              showClose: true
            })
          }

        })
      } ,

      getNewArtices() {
        let that = this

        getNewArtices().then(data => {
          console.log("new Article : " , data)
          that.newArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error', message: 
              '最新文章加载失败!', 
              showClose: true
            })
          }

        })

      } ,
      
      /**
       * 最热标签获取
       */
      getHotTags() {
        let that = this
        getHotTags()
        .then(data => {
          // console.log("hotTags : " , data)
          that.hotTags = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error', 
              message: '最热标签加载失败!', 
              showClose: true
            })
          }

        })
      } ,

      listArchives() {
        listArchives().then((data => {
          this.archives = data.data
        })).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '文章归档加载失败!', showClose: true})
          }
        })
      } ,

      // 展示查询到的所有tag
      querySearch(queryString, cb) {
        // console.log("this.allTags : " , this.allTags)
        var tags = this.allTags;
        var results = queryString ? tags.filter(this.createFilter(queryString)) : tags;
        // console.log("results : " , results)
        // 调用 callback 返回建议列表的数据
        cb(results);
      } ,
      // 过滤器
      createFilter(queryString) {
        return (search) => {
          console.log("search : " , search)
          return (search.tagName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      } ,
      // 请求所有的标签
      loadAllTags() {
        // 注意要把this拿出来
        let that = this
        // 加载所有tag
        that.$service({
          url: that.$service.adornUrl(`/article/forumArticleTag/allTags`) ,
          method: 'get' ,
        }).then((response) => {

          // console.log("tag response : " , response)

          if(response && response.code === 200) {
              that.allTags = response.data
          }
        }).catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error' ,
              message: '文章标签加载失败!' , 
              showClose: true
            })
          }
        })
      } ,
      // 没啥用
      handleSelect(item) {
        console.log(item);
      } ,

      // 通过标签名搜索文章
      getArticleByTag() {

      } ,

      // 加载所有文章类型
      loadAllTypes() {
        // 注意要把this拿出来
        let that = this
        // 请求所有文章类型
        that.$service({
          url: that.$service.adornUrl(`/article/forumArticleType/allType`) ,
          method: 'get' ,
        }).then((response) => {

          // console.log("tag response : " , response)

          if(response && response.code === 200) {
              that.allTypes = response.data
          }
        }).catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error' ,
              message: '文章类型加载失败!' , 
              showClose: true
            })
          }
        })
      } , 
    },
    components: {
      'card-me': CardMe,
      'card-article': CardArticle,
      'card-tag': CardTag,
      ArticleScrollPage,
      CardArchive
    }
  }
</script>

<style scoped>

  .el-container {
    width: 960px;
  }

  .el-aside {
    margin-left: 20px;
    width: 260px;
  }

  .el-main {
    padding: 0px;
    line-height: 16px;
  }

  .el-card {
    border-radius: 0;
  }

  .el-card:not(:first-child) {
    margin-top: 20px;
  }
</style>
